<template>
    <el-container style="height: 500px;">
        <el-aside width="200px">
            <el-tree
                    :data="categories"
                    show-checkbox
                    node-key="id">
            </el-tree>
        </el-aside>

        <el-container>
            <el-main>
                <div v-for="n in 10">
                    <chart class="item" :xAxisData="xAxisData" :series-data="seriesData"></chart>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
        padding-top: 25px;
    }
    .item {
        float: left;
        width: 200px;
    }
</style>

<script>
    import {queryCategoryTree} from '../../api/api'
    import chart from '../../views/Chart.vue'

    export default {
        components: {
            chart
        },
        data() {
            return {
                categories:[],
                xAxisData: ['7月1', '7月2', '7月3', '7月4', '7月5', '7月6', '7月7'],
                seriesData: [820, 1200, 901, 934, 1290, 2330, 1320],
            }
        },
        mounted() {
            this.getCategoriesTree()
        },

        methods: {
            //获取数据树
            getCategoriesTree() {
                let params = {}
                queryCategoryTree(params).then((res) => {
                    debugger
                    this.categories = res.data;
                })
            },

        }
    }
</script>